<template>
	<view>
		<view style="display: flex; position: relative; justify-content: space-evenly;">
			<view v-for="(step, index) in steps" :key="index"
				style="display: flex; flex-direction: column; align-items: center; font-weight: 400; font-size: 24rpx; color: #999999;width: 96rpx;">
				<image v-if="step.status === 'completed'" style="width: 50rpx; height: 50rpx;"
					src="../../static/wentichuli/finishbeifen 2@2x.png" mode="">
				</image>
				<image v-else-if="step.status === 'in-progress'" style="width: 50rpx; height: 50rpx;"
					src="../../static/wentichuli/this@2x.png" mode="">
				</image>
				<image v-else style="width: 50rpx; height: 50rpx;" src="../../static/wentichuli/finish_no@2x.png"
					mode="">
				</image>
				<text>{{ step.title }}</text>
			</view>

			<view class="dingweide">
				<u-line-progress :percentage="progressPercentage" :showText="false"></u-line-progress>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				steps: [{
						title: '问题梳理',
						status: 'completed'
					},
					{
						title: '开发受理',
						status: 'completed'
					},
					{
						title: '处理中',
						status: 'completed'
					},
					{
						title: '测试',
						status: 'in-progress'
					},
					{
						title: '已处理',
						status: 'not-completed'
					},
				]
			};
		},
		computed: {
			currentStepIndex() {
				// 找到当前“进行中”的步骤索引
				return this.steps.findIndex(step => step.status === 'in-progress');
			},
			progressPercentage() {
				// 计算完成的步骤数
				const completedSteps = this.steps.filter(step => step.status === 'completed').length;
				const inProgressSteps = this.steps.filter(step => step.status === 'in-progress').length;
				// 计算总步骤数
				const totalSteps = this.steps.length;
				// 如果有未完成的步骤，确保不超过
				if (this.steps.some(step => step.status === 'not-completed')) {
					return (completedSteps / totalSteps) * 100;
				} else {
					return ((completedSteps + inProgressSteps) / totalSteps) * 100;
				}
			}
		},
		methods: {
			nextStep() {
				if (this.currentStepIndex < this.steps.length - 1) {
					this.steps[this.currentStepIndex].status = 'completed'; // 完成当前步骤
					this.steps[this.currentStepIndex + 1].status = 'in-progress'; // 开始下一个步骤
				} else {
					uni.showToast({
						title: '已到最后一步',
						icon: 'none',
					});
				}
			}
		},
	};
</script>
<style lang="scss">
	.dingweide {
		width: 77%;
		height: 10px;
		margin: 0 auto;
		position: absolute;
		top: 25%;
		left: 50%;
		transform: translate(-50%, -30%);
		z-index: -1;
	}
</style>